<template>
  <div>
    <div v-if="!oc">
      <el-row>
        <el-col :span="24">
          <third-register></third-register>
        </el-col>
      </el-row>
      <!--bc首页-->
      <el-row style="display: flex;justify-content: space-between">
        <!-- 首页左 -->
        <el-col :span="12">
          <!--订单信息-->
          <basic-container>
            <div class="welLabel">订单</div>
            <div class="offer-info-box-border">
              <div class="offer-info-box b-bg el-col-5">合计 {{ offerGroup.total }}</div>
              <div class="offer-info-box g-bg el-col-5">活跃 {{ offerGroup.active }}</div>
              <div class="offer-info-box r-bg el-col-5">停止 {{ offerGroup.stop }}</div>
              <div class="offer-info-box lb-bg el-col-5">草稿 {{ offerGroup.draft }}</div>
            </div>
            <div style="margin-top: 40px" class="echarts_border">
              <div style="display: flex;margin-left: 20px">
                <div style="font-size: 14px;line-height: 28px;margin-right: 10px">更新时间 :</div>
                <el-date-picker
                  size="mini"
                  v-model="offerDate" type="monthrange" :picker-options="pickerOptions" @change="getOfferCharts"
                  range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyy-MM">
                </el-date-picker>
              </div>
              <div id="offerCharts" :style="{width: '100%', height: '400px'}" style="margin-top: 20px"></div>
            </div>
          </basic-container>

          <!-- 订单昨日数据-->
          <basic-container>
            <div class="welLabel">订单昨日数据 <span class="lastDayStyle">({{ yesterday }})</span></div>
            <div>
              <el-table :default-sort="{prop: 'cost', order: 'descending'}" :data="offerYesterdayData" height="250"
                        style="width: 100%;margin-top: 40px">
                <el-table-column prop="name" label="订单名称"/>
                <el-table-column prop="install" label="安装" sortable
                                 :sort-method="(a,b)=>{return a.install - b.install}">
                  <template slot-scope="scope">
                    <div style="display: flex">
                      <div>{{ Number(scope.row.install).toLocaleString() }}</div>
                      <div style="width: 17px;margin-left: 10px;height:23px">
                        <img
                          v-if="scope.row.installIncrease != 0"
                          :src="scope.row.installIncrease > 0 ? '/img/icon/rise.png' : scope.row.installIncrease < 0 ? '/img/icon/down.png':''"
                          style="width: 100%;height: 100%" alt=""></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="installIncrease" label="涨幅" sortable
                                 :sort-method="(a,b)=>{return a.installIncrease - b.installIncrease}">
                  <template slot-scope="scope">
                    <div
                      :style="{ color: scope.row.installIncrease > 0 ? '#1d953f' : scope.row.installIncrease < 0 ? '#b22c46':'black'}">
                      {{
                        scope.row.installIncrease > 0 ? '+' + Number(scope.row.installIncrease).toLocaleString()
                          : Number(scope.row.installIncrease).toLocaleString()
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="cost" label="花费" sortable :sort-method="(a,b)=>{return a.cost - b.cost}">
                  <template slot-scope="scope">
                    <div style="display: flex">
                      <div>{{ Number(scope.row.cost).toLocaleString() }}</div>
                      <div style="width: 17px;margin-left: 10px;height:23px">
                        <img
                          v-if="scope.row.costIncrease != 0"
                          :src="scope.row.costIncrease > 0 ? '/img/icon/rise.png' : scope.row.costIncrease < 0 ? '/img/icon/down.png':''"
                          style="width: 100%;height: 100%" alt=""></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="costIncrease" label="涨幅" sortable
                                 :sort-method="(a,b)=>{return a.costIncrease - b.costIncrease}">
                  <template slot-scope="scope">
                    <div
                      :style="{ color: scope.row.costIncrease > 0 ? '#1d953f' : scope.row.costIncrease < 0 ? '#b22c46':'black'}">
                      {{
                        scope.row.costIncrease > 0 ? '+' + Number(scope.row.costIncrease).toLocaleString() : Number(scope.row.costIncrease).toLocaleString()
                      }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </basic-container>

          <!-- 优化师昨日数据-->
          <basic-container>
            <div class="welLabel">优化师昨日数据 <span class="lastDayStyle">({{ yesterday }})</span></div>
            <div>
              <el-table :default-sort="{prop: 'cost', order: 'descending'}" :data="optimizerYesterdayData" height="250"
                        style="width: 100%;margin-top: 40px">
                <el-table-column prop="name" label="优化师"/>
                <el-table-column prop="install" label="安装" sortable
                                 :sort-method="(a,b)=>{return a.install - b.install}">
                  <template slot-scope="scope">
                    <div style="display: flex">
                      <div>{{ Number(scope.row.install).toLocaleString() }}</div>
                      <div style="width: 17px;margin-left: 10px;height:23px">
                        <img
                          v-if="scope.row.installIncrease != 0"
                          :src="scope.row.installIncrease > 0 ? '/img/icon/rise.png' : scope.row.installIncrease < 0 ? '/img/icon/down.png':''"
                          style="width: 100%;height: 100%" alt=""></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="installIncrease" label="涨幅" sortable
                                 :sort-method="(a,b)=>{return a.installIncrease - b.installIncrease}">
                  <template slot-scope="scope">
                    <div
                      :style="{ color: scope.row.installIncrease > 0 ? '#1d953f' : scope.row.installIncrease < 0 ? '#b22c46':'black'}">
                      {{
                        scope.row.installIncrease > 0 ? '+' + Number(scope.row.installIncrease).toLocaleString() :
                          Number(scope.row.installIncrease).toLocaleString()
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="cost" label="花费" sortable :sort-method="(a,b)=>{return a.cost - b.cost}">
                  <template slot-scope="scope">
                    <div style="display: flex">
                      <div>{{ Number(scope.row.cost).toLocaleString() }}</div>
                      <div style="width: 17px;margin-left: 10px;height:23px">
                        <img
                          v-if="scope.row.costIncrease != 0"
                          :src="scope.row.costIncrease > 0 ? '/img/icon/rise.png' : scope.row.costIncrease < 0 ? '/img/icon/down.png':''"
                          style="width: 100%;height: 100%" alt=""></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="costIncrease" label="涨幅" sortable
                                 :sort-method="(a,b)=>{return a.costIncrease - b.costIncrease}">
                  <template slot-scope="scope">
                    <div
                      :style="{ color: scope.row.costIncrease > 0 ? '#1d953f' : scope.row.costIncrease < 0 ? '#b22c46':'black'}">
                      {{
                        scope.row.costIncrease > 0 ? '+' + Number(scope.row.costIncrease).toLocaleString() : Number(scope.row.costIncrease).toLocaleString()
                      }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </basic-container>
        </el-col>
        <!-- 首页右 -->
        <el-col :span="12">
          <!--  审核信息 -->
          <basic-container>
            <div>
              <div class="welLabel"
                   :style="{cursor : is_User === 'creative'? 'not-allowed' : 'pointer' , color : is_User  === 'creative'? '#409eff':'#DCDCDC' }"
                   @click="switchAudit('creative')" style="float: left;margin-left: 20px">素材审核待办 <span
                style="color: red">({{ offerData.length }})</span></div>
              <div class="welLabel" v-if="roles.admin"
                   :style="{cursor : is_User  === 'user'?'not-allowed' : 'pointer' , color : is_User  === 'user'? '#409eff':'#DCDCDC' }"
                   @click="switchAudit('user')" style="float: right;margin-right: 20px">用户审核待办 <span
                style="color: red">({{ userData.length }})</span>
              </div>
            </div>
            <div v-show="is_User === 'creative'">
              <el-table :data="offerData" height="250" style="width: 100%;margin-top: 40px">
                <el-table-column prop="offer" label="订单名称"/>
                <el-table-column prop="platform" label="媒体">
                  <template slot-scope="scope">
                    <div style="display: flex;">
                      <div style="width: 20px;margin-right: 4px"
                           v-for="(item,index) in platformLogo(scope.row.platform)" :key="index">
                        <img style="width: 100%" :src="item.url">
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="count" label="待审核">
                  <template slot-scope="scope">
                    <div>
                      <a href="javascript:void(0)" @click="openOcPage(scope.row,'creativeAudit')">
                        <div
                          style="background-color: #DCDCDC;width: 60px;text-align: center;border-radius: 8px;color:#0073eb;">
                          {{ scope.row.count }}
                        </div>
                      </a>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-show="is_User === 'user'">
              <el-table :data="userData" height="250" style="width: 100%;margin-top: 40px">
                <el-table-column prop="email" label="登录账户"/>
                <el-table-column prop="name" label="用户姓名"/>
                <el-table-column prop="status" label="审核状态">
                  <template slot-scope="scope">
                    <div @click="redirect('user')"
                         style="cursor:pointer;background-color: #DCDCDC;width: 80px;text-align: center;border-radius: 8px">
                      待审核
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>

            </div>
          </basic-container>

          <!-- 活跃账户 -->
          <basic-container>
            <div class="welLabel">活跃账户</div>
            <div style="display: flex;justify-content: space-between">
              <!--  活跃用户数量 -->
              <div class="active-num">
                <div>
                  合计: <span>{{ activeAccountSum }}</span>
                </div>
              </div>
              <div style="width: 400px">
                <div id="activePie" :style="{width: '100%', height: '250px'}" style="margin-top: 20px"></div>
              </div>
            </div>
          </basic-container>

          <!-- 素材在线情况-->
          <basic-container>
            <div class="welLabel">素材在线情况 <span class="lastDayStyle">(截止{{ yesterday }})</span></div>
            <el-table :default-sort="{prop: 'total', order: 'descending'}" :data="creativeData" height="250"
                      style="width: 100%;margin-top: 40px">
              <el-table-column prop="name" label="订单名称"/>
              <el-table-column prop="total" label="在线总计" sortable :sort-method="(a,b)=>{return a.total - b.total}">
                <template slot-scope="scope">
                  {{ scope.row.total.toLocaleString() }}
                </template>
              </el-table-column>
              <el-table-column prop="imageOnline" label="图片" sortable
                               :sort-method="(a,b)=>{return a.imageOnline - b.imageOnline}">
                <template slot-scope="scope">
                  {{ scope.row.imageOnline.toLocaleString() }}
                </template>
              </el-table-column>
              <el-table-column prop="videoOnline" label="视频" sortable
                               :sort-method="(a,b)=>{return a.videoOnline - b.videoOnline}">
                <template slot-scope="scope">
                  {{ scope.row.videoOnline.toLocaleString() }}
                </template>
              </el-table-column>
            </el-table>
          </basic-container>

          <!-- 设计师昨日数据-->
          <basic-container>
            <div class="welLabel">设计师昨日数据 <span class="lastDayStyle">({{ yesterday }})</span></div>
            <div>
              <el-table :default-sort="{prop: 'spend', order: 'descending'}" :data="designerYesterdayData" height="250"
                        style="width: 100%;margin-top: 40px">
                <el-table-column prop="designer" label="设计师"/>
                <el-table-column prop="install" label="安装" sortable
                                 :sort-method="(a,b)=>{return a.install - b.install}">
                  <template slot-scope="scope">
                    <div style="display: flex">
                      <div>{{ Number(scope.row.install).toLocaleString() }}</div>
                      <div style="width: 17px;margin-left: 10px;height:23px">
                        <img
                          v-if="scope.row.installDiff != 0"
                          :src="scope.row.installDiff > 0 ? '/img/icon/rise.png' : scope.row.installDiff < 0 ? '/img/icon/down.png':''"
                          style="width: 100%;height: 100%" alt=""></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="installDiff" label="涨幅" sortable
                                 :sort-method="(a,b)=>{return a.installDiff - b.installDiff}">
                  <template slot-scope="scope">
                    <div
                      :style="{ color: scope.row.installDiff > 0 ? '#1d953f' : scope.row.installDiff < 0 ? '#b22c46':'black'}">
                      {{
                        scope.row.installDiff > 0 ? '+' + Number(scope.row.installDiff).toLocaleString() : Number(scope.row.installDiff).toLocaleString()
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="spend" label="花费" sortable :sort-method="(a,b)=>{return a.spend - b.spend}">
                  <template slot-scope="scope">
                    <div style="display: flex">
                      <div>{{ Number(scope.row.spend).toLocaleString() }}</div>
                      <div style="width: 17px;margin-left: 10px;height:23px">
                        <img
                          v-if="scope.row.spendDiff != 0"
                          :src="scope.row.spendDiff > 0 ? '/img/icon/rise.png' : scope.row.spendDiff < 0 ? '/img/icon/down.png':''"
                          style="width: 100%;height: 100%" alt=""></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="spendDiff" label="涨幅" sortable
                                 :sort-method="(a,b)=>{return a.spendDiff - b.spendDiff}">
                  <template slot-scope="scope">
                    <div
                      :style="{ color: scope.row.spendDiff > 0 ? '#1d953f' : scope.row.spendDiff < 0 ? '#b22c46':'black'}">
                      {{
                        scope.row.spendDiff > 0 ? '+' + Number(scope.row.spendDiff).toLocaleString() : Number(scope.row.spendDiff).toLocaleString()
                      }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </basic-container>
        </el-col>
      </el-row>
    </div>
    <!--oc首页-->
    <div v-else>
      <offer-center></offer-center>
    </div>
  </div>
</template>


<script>
import {mapGetters} from "vuex";
import {getSysDictList} from '@/api/system/dict'
import store from '@/store/'
import offerCenter from '@/views/offerCenter/index'
import * as echarts from "echarts";
import Moment from "moment";
import {
  getCreativeBacklog, getNotAuditUser, statisticsPlatform, getOfferByStatusGroup, getOfferByStatusCharts,
  getOfferYesterday, getOptimizerYesterday, statisticsOnlineCreative, statisticsDesignerPerformance
} from '@/api/wel/index'
import {OC_LOGIN_URL} from "@/const/urlConst"
import {getToken} from '@/util/auth';
import {genTokenKey} from '@/api/user';
import website from "@/config/website";
import {platformLogo} from "../../util/beetles";


const statusList = [{label: '等待提交', value: 0},
  {label: '等待审核', value: 1},
  {label: '审核通过', value: 2},
  {label: '审核拒绝', value: 3},
  {label: '禁用', value: 4}]
export default {
  name: "welrel",
  components: {
    offerCenter
  },
  data() {
    return {
      pickerOptions: {
        onPick: obj => {
          this.pickerMinDate = Moment(Moment(new Date(obj.minDate).getTime()).format("YYYY-MM")).valueOf()
        },
        disabledDate: time => {
          if (this.pickerMinDate) {
            // const day1 = 90 * 24 * 3600 * 1000;
            let maxTime = Moment(Moment(this.pickerMinDate).subtract(-2, "months").format("YYYY-MM")).valueOf()
            let minTime = Moment(Moment(this.pickerMinDate).subtract(2, "months").format("YYYY-MM")).valueOf()
            return time.getTime() > maxTime || time.getTime() < minTime;
          }
        }
      },//时间限制
      oc: false,
      offerData: [],//素材信息列表
      userData: [],//用户信息列表
      offerDate: [],//offer的时间范围
      yesterday: '',//昨日时间
      offerGroup: {},//用户offer统计数据
      activeAccountSum: '',//活跃账户合计
      offerYesterdayData: [],//订单昨日列表
      optimizerYesterdayData: [],//优化师昨日列表
      designerYesterdayData: [],//设计师昨日列表
      creativeData: [],//素材在线列表
      is_User: 'creative',
      platformsList: [],
    };
  },
  created() {
    //判断是不是oc端
    console.log('index', this.$route)
    this.oc = store.state.user.oc
    if (!this.oc) {
      // console.log('不是oc', this.$route)
      //获取审核代办数据
      this.getAudioData()
      //获取平台列表
      getSysDictList('platforms').then(map => {
        this.platformsList = map['platforms']
      })
      //获取订单列表时间默认值
      this.offerDate[0] = Moment(new Date()).subtract(2, "months").format("YYYY-MM")
      this.offerDate[1] = Moment(new Date()).format("YYYY-MM")
      //获取订单统计数据
      this.getOfferStatusGroup()
      //获取昨日数据
      this.getYesterday()
      let newPromise = new Promise((resolve) => {
        resolve()
      })

      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        this.getOfferCharts();
        this.activeAccount()
      })
    } else {
      // console.log('是oc', this.route)
      if (this.$route.query.path) {
        console.log('是oc', this.$route)
        if (this.$route.query.query !== '' && this.$route.query.query !== undefined) {
          const query = JSON.parse(this.$route.query.query)
          this.$router.push({path: this.$route.query.path, query})
        } else {
          this.$router.push({path: this.$route.query.path})
        }
      } else {
        // console.log('无路由跳转')
        // let routes = this.$router.options.routes
        // let hasCampaignManagement = false
        // routes.forEach(item => {
        //   if (item.name == "广告管理") {
        //     hasCampaignManagement = true
        //     return false
        //   }
        // })
        // if (this.roles.optimizer == true) {
        //   if (hasCampaignManagement)
        //     this.$router.push({name: '广告管理'})
        // }
      }
    }
  },
  computed: {
    ...mapGetters(["userInfo", "roles"]),
  },
  mounted() {
    //获取昨天日期
    this.yesterday = Moment().subtract(1, 'days').format('YYYY-MM-DD')
  },
  methods: {
    getTokenKeyInfo(row, type) {
      if (type == 'creativeAudit') {
        return JSON.stringify({offerId: row.id, r: '/creativeaudit'});
      }
      return '';
    },
    openOcPage(row, type) {
      let ocTokenKey = '';
      let headers = {};
      headers[website.tokenHeader] = getToken();
      genTokenKey({
        sync: true,
        headers: headers,
        info: this.getTokenKeyInfo(row, type),
        success: (data) => {
          ocTokenKey = data.tokenKey;
        },
        error: () => {
        }
      });
      if (ocTokenKey == '') {
        this.$message.error('获取信息错误，无法正确跳转到订单中心');
        return;
      }
      let eleList = document.querySelectorAll('div[newPageLink]');
      let content = eleList[0];
      let linkEle = document.createElement("a");
      content.appendChild(linkEle);

      // 利用URL.createObjectURL()方法为a元素生成blob URL
      linkEle.target = '_blank';
      linkEle.href = OC_LOGIN_URL + '?tokenKey=' + ocTokenKey;
      linkEle.click();
      linkEle.remove();
    },
    /**
     * 获取昨日数据
     */
    getYesterday() {
      //获取订单昨日数据
      getOfferYesterday().then(res => {
        this.offerYesterdayData = res.data.data
      })
      // //获取优化师昨日数据
      getOptimizerYesterday().then(res => {
        this.optimizerYesterdayData = res.data.data
      })
      //素材在线数据
      statisticsOnlineCreative().then(res => {
        this.creativeData = res.data.data
      })
      //设计师昨日数据
      statisticsDesignerPerformance().then(res => {
        this.designerYesterdayData = res.data.data
      })
    },
    /**
     * 获取offer订单图标
     */
    getOfferCharts() {
      if (this.offerDate === null) {
        this.offerDate = []
        this.offerDate[0] = Moment(new Date()).subtract(2, "months").format("YYYY-MM")
        this.offerDate[1] = Moment(new Date()).format("YYYY-MM")
      }
      getOfferByStatusCharts(this.offerDate[0], this.offerDate[1]).then(res => {
        this.initLineEcharts(res.data.data);
      })
    },
    /**
     * 获取订单统计数据
     */
    getOfferStatusGroup() {
      getOfferByStatusGroup().then(res => {
        this.offerGroup = res.data.data
      })
    },
    /**
     * 获取活跃账户
     */
    activeAccount() {
      statisticsPlatform().then(res => {
        this.activeAccountSum = res.data.data.total
        let keyList = []
        Object.keys(res.data.data).map(key => {
          if (key !== 'total') {
            keyList.push(key)
          }
        })
        let pieData = []
        let data = []
        this.platformsList.map(item => {
          keyList.map(it => {
            if (item.dictKey === it) {
              pieData.push(item.dictValue)
              data.push({name: item.dictValue, value: res.data.data[it]})
            }
          })
        })
        this.initActiveEcharts(pieData, data);
      })

    },
    /**
     * 用户状态转换
     */
    userStatus(status) {
      let value
      statusList.map(item => {
        if (item.value === status) {
          value = item.label
        }
      })
      return value
    },
    /**
     * 切换审核信息
     */
    switchAudit(type) {
      if (this.is_User === type) {
        return
      }
      this.is_User = type
    },
    /**
     *  媒体 logo
     * @param platform
     * @returns {*[]}
     */
    platformLogo(platform) {
      return platformLogo(platform)
    },
    getEchartsInst(eleName) {
      let ele = document.getElementById(eleName);
      let myInst = echarts.getInstanceByDom(ele);
      if (myInst) {
        return myInst;
      } else {
        return echarts.init(ele);
      }
    },
    /**
     * 初始化 echarts 图表
     */
    initLineEcharts(offerInfo) {
      let week = []
      offerInfo.weekRangeList.map((item, index) => {
        week.push(index + 1 + '周')
      })
      let myChart = this.getEchartsInst('offerCharts')
      let option
      option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let str = params[0].axisValue + "<br />" + offerInfo.weekRangeList[params[0].dataIndex] + "<br />";
            params.forEach((item) => {
              str +=
                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + item.color + '"></span>'
                + item.seriesName + " : " + item.data + "<br />";
            });
            return str;
          }
        },
        legend: {
          data: ['新增', '活跃', '停止', '删除']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: week
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新增',
            type: 'line',
            smooth: true,
            data: offerInfo.addList
          },
          {
            name: '活跃',
            type: 'line',
            smooth: true,
            data: offerInfo.activeList
          },
          {
            name: '停止',
            type: 'line',
            smooth: true,
            data: offerInfo.stopList
          },
          {
            name: '删除',
            type: 'line',
            smooth: true,
            data: offerInfo.deletedList
          },
        ]
      };
      option && myChart.setOption(option);
    },

    /**
     * 初始化 活跃用户 图表
     */
    initActiveEcharts(legendData, data) {
      /**
       * 需要循环获取类型
       * @type {EChartsType}
       */
      let myChart = this.getEchartsInst('activePie')
      let option
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          data: legendData
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: data
        }
        ]
      };
      option && myChart.setOption(option);
    },

    /**
     * 获取 审核代办数据
     */
    getAudioData() {
      getCreativeBacklog().then(res => {
        this.offerData = []
        res.data.data.map(item => {
          let list = {offer: '', platform: "", count: '', id: ''}
          list.offer = item.name
          list.count = item.count
          list.id = item.id
          let platform = [...item.android_platform.split(','), ...item.ios_platform.split(',')]
          list.platform = [...new Set(platform)].join(',')
          this.offerData.push(list)
        })
      })
      getNotAuditUser().then(res => {
        this.userData = res.data.data
      })
    },

    /**
     * 审核代办 页面跳转
     */
    redirect(type) {
      if (type === 'user') {
        this.$router.push({name: '用户管理'})
      }
    },
  },
}
</script>

<style>
.el-font-size {
  font-size: 14px;
}

.welLabel {
  font-size: 17px;
  font-weight: bold;
  color: #409eff;
  margin-left: 20px;
}

.offer-info-box-border {
  display: flex;
  justify-content: space-between;
}

.b-bg {
  background-color: #6e96d7;
}

.g-bg {
  background-color: #ffca5b;
}

.r-bg {
  background-color: #4de5d5;
}

.lb-bg {
  background-color: #6ab8f7;
}

.offer-info-box {
  margin-top: 30px;
  padding-top: 30px;
  height: 80px;
  text-align: center;
  background-size: cover;
  font-weight: 500;
  font-size: 20px;
  border-radius: 4px !important;
  color: #FFFFFF;
}

.echarts_border {
  box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 20px;
  padding-top: 10px;
}

.active-num {
  border-radius: 4px !important;
  background-color: #6ab8f7;
  background-size: 100% 100%;
  width: 160px;
  height: 80px;
  text-align: center;
  font-weight: 600;
  font-size: 24px;
  color: white;
  margin-top: 14%;
  margin-left: 7%;
  line-height: 80px;
}

.lastDayStyle {
  color: black;
  font-size: 16px;
  margin-left: 15px;
}
</style>

